<template>
  <div class="p-d">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="p-d b-f">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree class="filter-tree" :data="trees" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="p-d b-f">
          <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
        </div>
        <div class="m-t p-d b-f">
          <div class="btnStyle flex-between ">
            <ButtonComp :buttonData="buttonData" />
          </div>
          <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
            :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
          </TableCompEle>
        </div>
      </el-col>
    </el-row>
    <PreviewPdf v-if="showPdf" :pdfUrl="pdfUrl" @closeLookPdf="closeLookPdf" />
  </div>
</template>

<script>
import PreviewPdf from '@/views/common/previewPdf.vue'
export default {
  components: { PreviewPdf },
  data() {
    return {
      defaultProps: {
        children: 'childName',
        label: 'name'
      },
      trees: [
        {
          fieldName: 'yiqi',
          name: '仪器分类',
          childName: [
            { name: '分析仪器' },
            { name: '电子测量仪器' },
            { name: '计量仪器' },
            { name: '医学科研仪器' },
            { name: '地球探测仪器' },
            { name: '特种检测仪器' },
            { name: '海洋仪器' },
            { name: '激光器' },
            { name: '其他' }
          ]
        },
        {
          fieldName: 'xueke',
          name: '学科领域',
          childName: [
            { name: '化学' },
            { name: '生物学' },
            { name: '物理学' },
            { name: '基础医学' },
            { name: '药学' },
            { name: '机器工程' },
            { name: '其他' }
          ]
        },
        {
          fieldName: 'unit',
          name: '所属大单位',
          childName: [
            { name: '陆军研究院' },
            { name: '海军装备研究院' },
            { name: '空军装备研究院' },
            { name: '空军工程大学' },
            { name: '火箭军工程大学' },
            { name: '火箭军装备研究院' },
            { name: '军事科学院' },
            { name: '国防大学' },
            { name: '中国科学院' }
          ]
        }
      ],
      showPdf: false,
      pdfUrl: null,
      multipleSelection: [],
      queryParams: {
        total: 20,
        currentPage: 1,
        pageSize: 10
      },
      buttonData: [
        {
          kind: 'button',
          label: '新增',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
            this.$router.push({
              name: 'kyssDetail',
              params: { flag: 'add' }
            })
          }
        },
        {
          kind: 'button',
          label: '一键导出',
          plain: false,
          size: 'small',
          type: 'warning',
          click: () => { }
        },
        {
          kind: 'button',
          label: '一键导入',
          plain: false,
          size: 'small',
          type: 'warning',
          click: () => { }
        },
        {
          kind: 'button',
          label: '批量删除',
          plain: false,
          size: 'small',
          type: 'danger',
          click: () => {
            // if (this.multipleSelection.length == 0) {
            //   this.$message({
            //     type: 'warning',
            //     message: '请选择要删除的数据'
            //   })
            //   return
            // }
            const ids = []
            // this.multipleSelection.forEach(items => {
            //   ids.push(items.id)
            // })
            this.deleteFun(ids)
          }
        }
      ],
      tableData: [
        {
          name: '活细胞实时成像分析系统',
          name2: '科研设施',
          name3: '武器研究院',
          name4: '河北、唐山市',
          name5: '全社会共享',
          status: 1,
          statusValue: '待审核'
        },
        {
          name: '国家蛋白质科学中心',
          name2: '科研设施',
          name3: '武器研究院',
          name4: '北京、北京市',
          name5: '全社会共享',
          status: 1,
          statusValue: '待审核'
        },
        {
          name: '蛋白质制备与鉴定系统',
          name2: '科研设施',
          name3: '武器研究院',
          name4: '河北、唐山市',
          name5: '全社会共享',
          status: 1,
          statusValue: '待审核'
        },
        {
          name: '细胞/分子成像系统',
          name2: '科研设施',
          name3: '武器研究院',
          name4: '河北、唐山市',
          name5: '全社会共享',
          status: 1,
          statusValue: '待审核'
        },
        {
          name: '长直线性能试验路',
          name2: '科研设施',
          name3: '武器研究院',
          name4: '河北、唐山市',
          name5: '全社会共享',
          status: 2,
          statusValue: '审核通过'
        },
        {
          name: '国家汽车整车风洞中心',
          name2: '科研设施',
          name3: '武器研究院',
          name4: '河北、唐山市',
          name5: '全社会共享',
          status: 3,
          statusValue: '审核不通过'
        }
      ],
      tableConfig: [
        {
          prop: 'name',
          label: '设施名称'
        },
        {
          prop: 'name2',
          label: '设施类别'
        },
        {
          prop: 'name3',
          label: '所属单位'
        },
        {
          prop: 'name4',
          label: '所属区域'
        },
        {
          prop: 'name5',
          label: '共享范围'
        },
        {
          label: '状态',
          prop: 'statusValue',
          width: '150px',
          isStatus: row => {
            switch (row.status) {
              case 1: // 候选
                return { color: 'blue', bgColor: 'blue-bg' }
              case 2: // 通过初选
                return { color: 'green', bgColor: 'green-bg' }
              default: // 不通过
                return { color: 'red', bgColor: 'red-bg' }
            }
          }
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(190),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'kyssDetail',
                params: { flag: 'look', id: row.id }
              })
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'kyssDetail',
                params: { flag: 'edit', id: row.id }
              })
            }
          },
          {
            label: '下载',
            isLink: true,
            type: 'primary',
            method: row => {
              this.downLoadFile(row)
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun([row.id])
            }
          }
        ]
      },
      queryString: {
        name: '',
        yearStr: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
        },
        formData: [
          {
            type: 'Input',
            label: '科研设施',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '所属单位',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              yearStr: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ]
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    deleteFun() {
      this.$confirm(`本操作将删除该信息，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            message: '删除成功',
            type: 'error'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
</style>